<h4 >{{_('评论')}} ({[post.comment_num]})</h4>
<!--导航-->
 <header class="panel-heading tab-bg-dark-navy-blue osr-panel-heading">
    <ul class="nav nav-tabs">
        <li id="head_li_sort_" class="active">
            <a data-toggle="tab" class="osr-pointer" v-on:click="get_comment(null, 1)">
                {{_("喜欢排序")}}
            </a>
        </li>
        <li id="head_li_sort_t-asc">
            <a data-toggle="tab" class="osr-pointer" v-on:click="get_comment('t-asc',1)">
                {{_("时间正序")}}
            </a>
        </li>
        <li id="head_li_sort_t-desc">
            <a data-toggle="tab" class="osr-pointer" v-on:click="get_comment('t-desc',1)">
                {{_("时间倒序")}}
            </a>
        </li>
    </ul>
</header>

<ul class="osr-list-group">
    <li class="osr-list-group-item" v-for="(ct,index ) in comments.datas">
      <div class="item-content">
          <!--１级评论-->
          <header>
              <!--<figure class="comment&#45;&#45;userpic"><img src="" alt=""></figure>-->
                <strong>
                    <a :href="'/user?id='+ct.user_id">{[ct.username]}</a>
                </strong>
                <time  class="osr-date">{[ct.issue_time | formatDate]}</time>
          </header>
          <!--正文-->
          <div class="osr-text">
            <div :id="'#comment'+ct._id" v-html="ct.content"></div>
          </div>
          <br>
          <div>
              <div class="pull-left">
                    <!--评论点赞-->
                  <span class="osr-pointer" v-if="ct.like_it_already" :id="ct._id" data-toggle="tooltip" title="{{_('预览页面, 不能点赞')}}">
                     <i class="fa fa-thumbs-up osr-color-danger"></i> {[ct.like]}
                  </span>
                  <span class="osr-pointer" :id="ct._id" v-else data-toggle="tooltip" title="{{_('预览页面, 不能点赞')}}">
                     <i class="fa fa-thumbs-o-up osr-color-danger"></i> {[ct.like]}
                  </span>
              </div>

              {% if current_user.is_authenticated %}
              <!--登录用户才显示评论举报-->
              <div class="pull-right osr-date">
                    <span v-on:click="ready_inform_ct(ct)" class="osr-pointer" data-toggle="modal" data-target="#comment-inform">
                        {{_("举报")}}
                    </span>&nbsp;
              </div>
              {% endif %}
              <br>

          </div>
            <!--２级评论-->
            <ul class="osr-list-group-lv2">
                <li v-for="(treply, tindex) in ct.reply" class="osr-list-group-item-lv2">
                    <hr v-if="tindex!=0" class="osr-hr">
                    <header>
                        <strong>
                            <a :href="'/user?id='+treply.user_id">{[treply.username]}</a>
                        </strong>
                        <time class="osr-date">{[treply.issue_time | formatDate]}</time>
                    </header>

                    <div class="osr-text">
                        {{_('回复')}}<a :href="'/user?id='+treply.reply_user_id">
                            @{[treply.reply_username]}:
                        </a>
                        <div :id="'#comment'+treply._id" v-html="treply.content"></div>
                    </div>
                    <br>
                    {% if current_user.is_authenticated %}
                    <!--登录用户才显示评论举报-->
                     <div class="pull-right osr-date">
                        <span v-on:click="ready_inform_ct(treply)" class="osr-pointer" data-toggle="modal" data-target="#comment-inform">
                            {{_("举报")}}
                        </span>&nbsp;
                        </div>
                    {% endif %}
                    <br>
                </li>
            </ul>
            <!--２级评论//-->
      </div>
    </li>
</ul>
  <!--评论举报模态-->
    <div class="modal fade" id="comment-inform" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">{{_('评论举报')}}</h4>
                </div>
                <div class="modal-body">
                {% include "osr-style/pages/based/_inform_modal_input.html" %}
                </div>
                <div class="modal-footer">
                    <button class="btn osr-btn btn-info" type="button" data-dismiss="modal" aria-hidden="true">
                        {{_("取消")}}
                    </button>
                    <button v-on:click="content_inform(ready_comment._id, 'comment', inform.category, inform.details)" class="btn osr-btn btn-success" type="button" data-dismiss="modal" aria-hidden="true">
                        {{_("提交")}}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--评论举报模态框-->

<!-- 页面导航-->
<div class="text-center visible-lg visible-md">
    <ul class="pagination">
        <li v-if="pages.last < pages.current_page && pages.last>0">
            <a v-on:click="get_comment(sort, pages.last)">«</a>
        </li>
        <li v-else class="disabled">
            <a>«</a>
        </li>

        <li v-for="page in pages.last_show" >
            <a v-if="page!='...'" v-on:click="get_comment(sort, page)">{[page]}</a>
            <a v-else href="#">...</a>
        </li>

        <li class="active">
            <a v-on:click="get_comment(sort, pages.current_page)">{[pages.current_page]}</a>
        </li>

       <li v-for="page in pages.next_show" >
            <a v-if="page!='...'" v-on:click="get_comment(sort, page)" >{[page]}</a>
            <a v-else href="#">...</a>
       </li>

       <li v-if="pages.next > pages.current_page && pages.next<=pages.page_total">
            <a v-on:click="get_comment(sort, pages.next)">»</a>
        </li>
        <li v-else class="disabled">
            <a>»</a>
        </li>
    </ul>
</div>
<!-- //页面导航-->
<!-- m页面导航-->
<ul class="pager visible-xs visible-sm">
    <li v-if="pages.last < pages.current_page && pages.last>0" class="previous">
        <a v-on:click="get_comment(sort, pages.last)">
            {{_("上一页")}}
        </a>
    </li>
    <li v-if="pages.next > pages.current_page  && pages.next<=pages.page_total" class="next">
        <a v-on:click="get_comment(sort, pages.next)">{{_("下一页")}}</a>
        </li>
</ul>
<!-- //m页面导航-->
<script>

    //获取comment
    function get_comment(sort, page){

        if(sort=="t-desc"){
            sort = [{"issue_time":-1}];
        }else if(sort=="t-asc"){
            sort = [{"issue_time":1}];
        }else{
            sort = [{"like": -1}, {"issue_time": -1}];
        }

        if(!page){
            page = 1
        }

        d = {
            target_id:vue.post_id,
            sort:JSON.stringify(sort),
            page:page,
            pre:10
        }

        var result = osrHttp("GET","/api/comment", d, args={not_prompt:true});
        result.then(function (r) {
            vue.comments = r.data.comments;
            vue.pages = paging(page_total=vue.comments.page_total,
                            current_page=vue.comments.current_page);
        });
    }


    //提交comment
    function send_comment(reply_id, reply_user_id, reply_username, input_id){
        formValidate();
        if (!reply_id){
            reply_id = "";
            var reply_user_id = vue.post.user._id;
            var reply_username = vue.post.username;
        }else(
            $("#reply"+input_id).hide()
        );

        if (!input_id){
            input_id = "";
        }

        d = {
            content:$("#comment"+input_id).val(),
            target_id:vue.post._id,
            reply_id:reply_id,
            reply_user_id:reply_user_id,
            reply_username:reply_username
        }
        var result = osrHttp("POST","/api/comment", d);
        result.then(function (r) {
            vue.post.comment_num += 1;
            $("#comment"+input_id).val("");
            get_comment();
            if (input_id){
                togle_comment_input(input_id);
            }
        });
    }


     //点赞comment
    function ct_like(id, index){
        d = {
            id:id,
            type:"comment"
        }
        var result = osrHttp("PUT","/api/comment/like", d, args={not_prompt:true});
        result.then(function (r) {
            if (r.data.msg_type == "s"){
            if (vue.comments.datas[index].like_it_already){
                vue.comments.datas[index].like -= 1;
                vue.comments.datas[index].like_it_already = false;
            }else{
                vue.comments.datas[index].like += 1;
                vue.comments.datas[index].like_it_already = true;
            }
        }
        });
    }

    //回复已由评论的时候显示评论宽
    function togle_comment_input(id){
        var reply_div = $("#reply-"+id);
        if (reply_div.is(':hidden')){
            reply_div.show();
        }else{
            reply_div.hide();
        }
    }

    function ready_inform_ct(comment_obj){
        vue.ready_comment = comment_obj;
    }

</script>